---
sidebar_position: 1
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Getting started

The goal of the _Fundamentals_ section is to help you gain a strong foundation on the core concepts of Reanimated and give you the confidence to explore more advanced use cases on your own. This section is packed with interactive examples, code snippets and explanations. Are you ready? Let's dive in!

## What is React Native Reanimated?

React Native Reanimated is a powerful animation library built by [Software Mansion](https://swmansion.com/).

With Reanimated, you can easily create smooth animations and interactions that run on the [UI thread](/docs/fundamentals/glossary#ui-thread).

## Prerequisites

Reanimated 4.x works only with [the React Native New Architecture (Fabric)](https://reactnative.dev/architecture/landing-page).
If your app still uses the old architecture, you can use Reanimated in version 3 which is still actively maintained.

Alternatively, you can dive into [our examples](https://github.com/software-mansion/react-native-reanimated/tree/main/apps/common-app/src/apps) on GitHub.

## Installation

It takes two steps to add Reanimated 4 to an Expo project:

### Step 1: Install the package

Install `react-native-reanimated` and `react-native-worklets` packages from npm:

<Tabs groupId="package-managers">
  <TabItem value="npm" label="NPM">
    ```bash
    npm install react-native-reanimated
    ```
  </TabItem>
  <TabItem value="yarn" label="YARN">
    ```bash
    yarn add react-native-reanimated
    ```
  </TabItem>
</Tabs>

#### Dependencies

This library requires an installation of the `react-native-worklets` dependency. It was separated from `react-native-reanimated` for better modularity and must be installed separately.
You can read more about Worklets in the [Worklets documentation](https://docs.swmansion.com/react-native-worklets/).

<Tabs groupId="package-managers">
  <TabItem value="npm" label="NPM">
    {/* TODO - add information about the necessity to specify a proper version of the library compatible with reanimated */}
    ```bash 
    npm install react-native-worklets
    ```
  </TabItem>
  <TabItem value="yarn" label="YARN">
    ```bash
    yarn add react-native-worklets
    ```
  </TabItem>
</Tabs>

### Step 2: Rebuild native dependencies

Run prebuild to update the native code in the `ios` and `android` directories.

<Tabs groupId="package-managers">
  <TabItem value="npm" label="NPM">
    ```bash
    npx expo prebuild
    ```
  </TabItem>
  <TabItem value="yarn" label="YARN">
    ```bash
    yarn expo prebuild
    ```
  </TabItem>
</Tabs>

And that's it! Reanimated 4 is now configured in your Expo project.

### React Native Community CLI

When using [React Native Community CLI](https://github.com/react-native-community/cli), you also need to manually add the `react-native-worklets/plugin` plugin to your `babel.config.js`.

```js {7}
  module.exports = {
    presets: [
      ... // don't add it here :)
    ],
    plugins: [
      ...
      'react-native-worklets/plugin',
    ],
  };
```

:::caution

`react-native-worklets/plugin` has to be listed last.

:::

<details>
<summary>Why do I need this?</summary>

In short, the Worklets Babel plugin automatically converts special JavaScript functions (called [worklets](/docs/fundamentals/glossary#worklet)) to allow them to be passed and run on the UI thread.

Since [Expo SDK 50](https://expo.dev/changelog/2024/01-18-sdk-50), the Expo starter template includes the Worklets Babel plugin by default.

To learn more about the plugin head onto to [Worklets Babel plugin docs page](https://docs.swmansion.com/react-native-worklets/docs/worklets-babel-plugin/about).

</details>

#### Clear Metro bundler cache (recommended)

<Tabs groupId="package-managers">
  <TabItem value="npm" label="NPM">
    ```bash
    npm start -- --reset-cache
    ```
  </TabItem>
  <TabItem value="yarn" label="YARN">
    ```bash
    yarn start --reset-cache
    ```
  </TabItem>
</Tabs>

#### Android

No additional steps are necessary.

#### iOS

While developing for iOS, make sure to install [pods](https://cocoapods.org/) first before running the app:

```bash
cd ios && pod install && cd ..
```

#### Web

For building apps that target web using [react-native-web](https://www.npmjs.com/package/react-native-web) we highly recommend to use [Expo](https://expo.dev/).

To use Reanimated on the web all you need to do is to install and add [`@babel/plugin-proposal-export-namespace-from`](https://babeljs.io/docs/en/babel-plugin-proposal-export-namespace-from) Babel plugin to your `babel.config.js`.

<Tabs groupId="package-managers">
  <TabItem value="npm" label="NPM">
    ```bash
    npm install @babel/plugin-proposal-export-namespace-from
    ```
  </TabItem>
  <TabItem value="yarn" label="YARN">
    ```bash
    yarn add @babel/plugin-proposal-export-namespace-from
    ```
  </TabItem>
</Tabs>

```js {7}
  module.exports = {
      presets: [
        ... // don't add it here :)
      ],
      plugins: [
          ...
          '@babel/plugin-proposal-export-namespace-from',
          'react-native-worklets/plugin',
      ],
  };
```

Make sure to list `react-native-worklets/plugin` last.

More advanced use cases such as running Reanimated with `webpack` or with `Next.js` are explained in a separate [Web Support](/docs/guides/web-support) guide.
